﻿
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/MusciShopMasterPage.cshtml";
}
<link rel="stylesheet" type="text/css" href="~/Content/DetailsCss.css" />

<div class="DetailsBig">
    <span style="letter-spacing: 2px;">
        首页 > 专辑 > <a href="#" style="letter-spacing: 1px;color: rgba(128,128,128,0.8);">[独家发售] 大张伟2018全新专辑《人间精品》</a>
    </span>
    <div class="DetailsInfo">
        <div class="DetailsInfoImage" style="background-image: url(../image/im2.jpg);">
            <div>
                <span id="ImagePrevious">&lt;</span>
                <div class="DetailsInfoLittleImage">

                    <div class="DetailsInfoLittleImageLi" style="background-image: url(../image/im1.jpg);"></div>
                    <div class="DetailsInfoLittleImageLi DetailsInfoLittleImageLiClick" style="background-image: url(../image/im2.jpg);"></div>
                    <div class="DetailsInfoLittleImageLi" style="background-image: url(../image/im3.jpg);"></div>
                    <div class="DetailsInfoLittleImageLi" style="background-image: url(../image/im4.png);"></div>
                    <div class="DetailsInfoLittleImageLi" style="background-image: url(../image/im5.png);"></div>
                    <div class="DetailsInfoLittleImageLi" style="background-image: url(../image/im6.jpg);"></div>

                </div>
                <span id="ImageNext">&gt;</span>
            </div>
        </div>
        <div class="DetailsInfoText">
            <h3 style="padding: 30px 0px;">[独家发售] 大张伟2018全新专辑《人间精品》</h3>
            <span>商城价格</span>
            <span style="color: #FE5196;font-size: 30px;font-weight: 700;">¥83.1</span>
            <span style="text-decoration: line-through;">¥83.1</span>
            <div class="hr"></div>
            <div>
                <span style="line-height: 40px;margin-right: 50px;color: rgba(128,128,128,0.8);">重量</span>
                <span style="line-height: 40px;color: rgba(128,128,128,0.8);">0.33kg</span>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <span style="line-height: 40px;margin-right: 50px;color: rgba(128,128,128,0.8);">数量</span>
                <div class="QuantityDiv">
                    <div align="center" class="QuantityDivAdd">
                        <span>-</span>
                    </div>
                    <div align="center" class="QuantityDivUnit" style=";width: 45px;border: 2px solid rgba(128,128,128,0.8);background-color: #FFFFFF;">
                        <span style="margin-top: 4px;display: block;">1</span>
                    </div>
                    <div align="center" class="QuantityDivRem">
                        <span style="display: block;margin-top: 2px;">+</span>
                    </div>
                </div>
            </div>
            <div style="height: 30%;min-height: 50px;max-height: 300px;"></div>
            <div class="DetailsInfoTextBut">
                <a>加入购物车</a>
                <a>立即购买</a>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/vue.js"></script>
<script>
		$(function() {

			$("#ImagePrevious").click(function() {
				var currIndex = $(".DetailsInfoLittleImageLiClick").index();
				if (currIndex == 0)
					currIndex = $(".DetailsInfoLittleImageLi").length;
				var currDiv = $(".DetailsInfoLittleImageLi").eq(currIndex - 1);
				loadImage(currDiv);
			});

			$("#ImageNext").click(function() {
				var currIndex = $(".DetailsInfoLittleImageLiClick").index();
				if (currIndex == $(".DetailsInfoLittleImageLi").length - 1)
					currIndex = -1;
				var currDiv = $(".DetailsInfoLittleImageLi").eq(currIndex + 1);
				loadImage(currDiv);
			});

			$(".DetailsInfoLittleImage").on("click", ".DetailsInfoLittleImageLi", function() {
				loadImage(this);
			})

			function loadImage(div) {
				//清除所有
				$(".DetailsInfoLittleImageLi").removeClass("DetailsInfoLittleImageLiClick");
				//加载当前
				$(div).addClass("DetailsInfoLittleImageLiClick");
				//加载图片
				$(".DetailsInfoImage").css("background-image", $(div).css("background-image"));
			}

			$(".QuantityDivAdd").click(function() {
				var unit = parseInt($(".QuantityDivUnit span").text());
				if (unit == 0)
					unit = 100;
				$(".QuantityDivUnit span").text(unit - 1);
			});

			$(".QuantityDivRem").click(function() {
				var unit = parseInt($(".QuantityDivUnit span").text());
				if (unit == 99)
					unit = -1;
				$(".QuantityDivUnit span").text(unit + 1);
			});

			$(window).resize(function() {
				SetImageHeight();
			})

			//更改图片高度
			function SetImageHeight() {
				$(".DetailsInfoImage").css("height", $(".DetailsInfoImage").css("width"));
				$(".DetailsInfoImage>div").css("top", $(".DetailsInfoImage").css("width"));
			};
			SetImageHeight();
		})
</script>

